<!DOCTYPE html>
<html>
<head>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page isELIgnored="false" %>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.8.0.js"></script>

    <script type="text/javascript">
        var UrlActionSubmit = 'api/VersionInfoAPI/Add';//新增地址
        var UrlActionQuery = 'api/VersionInfoAPI/List_Ajax';//查询地址
        var UrlActionDelete = 'api/VersionInfoAPI/Delete';//删除地址

        var UrlAction = UrlActionQuery;
        var pageSize = 2;
        var PageVersionInfoQuery = {
            pageSize: pageSize,
            pageIndex: 1,
            TotalPages: 0,
            VersionName: '',
        };

        $(function () {
            $("#btnSubmit").on("click", function () {
                Submit();
            });
            $("#btnSearch").on("click", function () {
                search();
            });
            getDataDrawTable(PageVersionInfoQuery, UrlAction);
        });
        //新增
        function Submit() {
            var RequestData = {
                VersionName: $("#VersionName").val(),
                VersionNumber: $("#VersionNumber").val(),
                Stage: $("#Stage option:selected").val(),
                Submitter: $("#Submitter").val(),
            };

            var ResponseData;
            var errorMessage = "";
            $.ajax({
                url: UrlActionSubmit,
                data: JSON.stringify(RequestData),
                contentType: "application/json;charset=UTF-8",
                type: "POST",
                async: false,
                timeout: 500,
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus == "timeout")
                        errorMessage = "请求数据超时，请重试";
                    else
                        errorMessage = "请求数据的服务异常，请重试";
                },
                success: function (data) {
                    ResponseData = JSON.parse(data);
                },
                complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                    if (status == 'timeout') {//超时,status还有success,error等值的情况
                        errorMessage = "请求数据超时，请重试";
                    }
                }
            });
            if (errorMessage != "") {
                alert(errorMessage)
            } else {
                if (ResponseData)
                    alert('成功')
                else
                    alert('失败')
            }
            homePage();//翻页到首页，刷新页面
        }
        //查询
        function search() {

            getDataDrawTable(PageVersionInfoQuery, UrlAction);
        }
        //画表格
        function drawTable(list) {//success的回调函数
            removeAll("tb");
            var table = $("#tb");
            for (var i = 0; i < list.length; i++) {
                var tr = $("<tr>");

                tr.append($("<td class=''>" + FormatDate(list[i]["SubmitDate"]) + "</td>"));
                tr.append($("<td class=''>" + format(list[i]["Number"]) + "</td>"));
                tr.append($("<td class=''>" + format(list[i]["VersionName"]) + "</td>"));
                tr.append($("<td class=''>" + format(list[i]["VersionNumber"]) + "</td>"));
                tr.append($("<td class=''>" + format(list[i]["Stage"]) + "</td>"));
                tr.append($("<td class=''>" + format(list[i]["Submitter"]) + "</td>"));

                tr.append($("<td class=''>"
                        + "<a href='javascript:void(0)' onclick='Del(" + list[i]["Id"] + ")'>删除</a>"
                        + "</td>"));

                tr.appendTo(table);
            }
        }
        //删除
        function Del(Id) {
            var RequestData = {Id: Id};
            var msg = "您真的确定要删除吗？\n\n请确认！";
            if (confirm(msg) == true) {
                //return true;
            } else {
                return false;
            }

            var ResponseData;
            var errorMessage = "";
            $.ajax({
                url: UrlActionDelete,
                data: JSON.stringify(RequestData),
                contentType: "application/json;charset=UTF-8",
                type: "POST",
                async: false,
                timeout: 500,
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus == "timeout")
                        errorMessage = "请求数据超时，请重试";
                    else
                        errorMessage = "请求数据的服务异常，请重试";
                },
                success: function (data) {
                    ResponseData = JSON.parse(data);
                },
                complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                    if (status == 'timeout') {//超时,status还有success,error等值的情况
                        errorMessage = "请求数据超时，请重试";
                    }
                }
            });
            if (errorMessage != "") {
                alert(errorMessage)
            } else {
                if (ResponseData.result) {
                    getDataDrawTable(PageVersionInfoQuery, UrlAction);//刷新页面
                } else {
                    alert(ResponseData.des);
                }
            }
            search();//刷新页面
        }

        //datagrid.js start++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        function turnPage(pageIndex) {
            PageVersionInfoQuery.pageIndex = pageIndex;
            getDataDrawTable(PageVersionInfoQuery, UrlAction);
        }//翻页
        function homePage() {
            turnPage(1);
        }
        function previousPage() {
            turnPage(PageVersionInfoQuery.pageIndex - 1);
        }
        function nextPage() {
            turnPage(PageVersionInfoQuery.pageIndex + 1);
        }
        function endPage() {
            turnPage(PageVersionInfoQuery.TotalPages);
        }
        //获取数据画表格
        function getDataDrawTable(PageVersionInfoQuery, UrlAction) {
            $.ajax({
                url: UrlAction,
                data: JSON.stringify(PageVersionInfoQuery),
                contentType: "application/json;charset=UTF-8",
                type: "POST",
                async: false,
                success: function (data) {
                    var listPage = JSON.parse(data);
                    drawTable(listPage.rows);
                    MakePagination(listPage);
                },
                error: function (xhr, textStatus, error) {
                    alert(error);
                }
            });
        }
        //画页码
        function MakePagination(pageTable) {
            var PageSize = PageVersionInfoQuery.pageSize;//每页记录数
            var PageIndex = PageVersionInfoQuery.pageIndex;//当前页

            var TotalCount = pageTable.total;//总记录数

            var TotalPages = Math.ceil(TotalCount / PageSize);//总页数

            var HasPreviousPage = PageIndex > 1;//是否有上一页
            var HasNextPage = PageIndex < TotalPages;//是否有下一页

            PageVersionInfoQuery.TotalPages = TotalPages;

            var strHomePagePreviousPage = "<a href='javascript:void(0)' onclick='homePage()'>首页</a>"
                    + "<a href='javascript:void(0)' onclick='previousPage()'>"
                    + "《"
                    + "</a>";
            var strNextPageEndPage = "<a href='javascript:void(0)' onclick='nextPage()'>"
                    + "》"
                    + "</a>"
                    + "<a href='javascript:void(0)' onclick='endPage()'>尾页</a>";
            strHomePagePreviousPage = HasPreviousPage ? strHomePagePreviousPage : "";
            strNextPageEndPage = HasNextPage ? strNextPageEndPage : "";

            var strPagination = "<div class='list-YeMa' id='divYeMa'>"
                    + "<span class='JILU'>共 " + TotalCount + " 条记录，每页 " + PageSize + " 条</span>"
                    + "<div class='TiaoZhuan'>"
                    + strHomePagePreviousPage
                    + "<span class='currentPageSpan'>" + PageIndex + "/" + TotalPages + "页</span>"
                    + strNextPageEndPage
                    + "</div>"
                    + "</div>";

            $("#divYeMa").remove();
            $("#divTabel").append($(strPagination));
        }
        //utility-------------------------------------------------------------------------------
        function removeAll(tableId) {//清除table已有的内容
            $("#" + tableId + " tr:not(:first)").remove();
        }//清空table

        function format(value) {
            return value == null ? "" : value;
        }//格式化null值
        function FormatDate(jsonDate) {//json日期格式转换为正常格式
            if (jsonDate == null)
                return "";
            try {
                var date = new Date(parseInt(jsonDate));

                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                return date.getFullYear() + "-" + month + "-" + day;
            } catch (ex) {
                return "";
            }
        }
        //datagrid.js end++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    </script>
</head>
<body>
<div>
    <div>
            <span>
                <label>版本名称：</label>
                <input id="VersionName"/>
            </span>
        <span>
                <label>版本号：</label>
                <input id="VersionNumber"/>
            </span>
        <span>
                <label>阶段标识：</label>
                <select id="Stage">
                    <option selected="selected" value="Base">Base</option>
                    <option value="Alpha">Alpha</option>
                    <option value="Beta">Beta</option>
                    <option value="RC">RC</option>
                    <option value="Release">Release</option>
                </select>
            </span>
        <span>
                <label>提交人：</label>
                <input id="Submitter"/>
            </span>
    </div>
    <div>
        <input type="button" value="提交" id="btnSubmit"/>
    </div>
</div>

<div>
    <div id="divHidden">
        <input type="hidden" id="strWhere"/>
    </div>
    <div>
        <div id="divTabel">
            <table class="dataShowTable" id="tb">
                <tr>
                    <th>日期</th>
                    <th>编号</th>
                    <th>版本名称</th>
                    <th>版本号</th>
                    <th>阶段标识</th>
                    <th>提交人</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>